The border property in CSS is used to set the border around an HTML element. You can customize the border's width, style, color, and radius. The border property is a shorthand for the following individual properties:

• border-width

• border-style

• border-color

• border-radius

Shorthand Syntax

The shorthand syntax for the border property is:

border: [border-width] [border-style] [border-color];

Examples

Here are some examples demonstrating the use of the border property:

1. Basic Border:

div {
    border: 2px solid black;
}

2. Different Styles:

div {
    border-width: 2px;
    border-style: dashed;
    border-color: red;
}

3. Border Radius:

div {
    border: 2px solid black;
    border-radius: 10px;
}

4. Individual Borders: You can also set individual borders for each side of the element using border-top, border-right, border-bottom, and border-left properties.

div {
    border-top: 2px solid black;
    border-right: 2px dashed red;
    border-bottom: 2px solid blue;
    border-left: 2px dotted green;
}

Detailed Example

Here's a detailed example that demonstrates various border properties:

.container {
    width: 300px;
    height: 150px;
    border: 5px solid #333; /* Shorthand property */
    border-radius: 15px; /* Rounded corners */
    border-top: 5px solid red; /* Top border */
    border-right: 5px dashed blue; /* Right border */
    border-bottom: 5px double green; /* Bottom border */
    border-left: 5px dotted yellow; /* Left border */
}

In this example:

• The shorthand border property sets a solid black border with 5px width.

• The border-radius property sets rounded corners with a radius of 15px.

• Individual borders for each side are set with different styles and colors.

Additional Notes

• Border Styles: You can use various border styles such as solid, dotted, dashed, double, groove, ridge, inset, outset, none, and hidden.

• Box Model: Borders are part of the box model, which also includes padding, content, and margin.

Feel free to ask if you need more specific examples or further explanation on any of these properties!